import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
  Link,
  useNavigate
} from "react-router-dom";
import Home from "./views/home/Home";
import All from "./views/all/All";
import ShoppingCar from "./views/userinfo/ShoppingCar";
import Classify from "./views/home/Classify";
import About from "./views/about/About";
import Settle from "./views/userinfo/Settle";
import Userinfo from './views/userinfo/Userinfo';
import Search from "./views/all/Search";
import GoodsDetails from "./views/order/GoodsDetails";
import './App.css';
function App() {
  const navigate = useNavigate()
  const search = async () => {
    const search = document.getElementById('search').value
    navigate(`/search/${search}`)
  }
  return (
    <div>
      <div className="head">
        <div className="wrapper clearfix">
          <div className="clearfix">
            <h1 className="fl">
              <Link to="/"><img src="/logo/logo.png" style={{ width: '100%' }} /></Link>
            </h1>
            <div className="fr clearfix">
              <p className="fl">
                <Link to="/login">登录</Link>
                <Link to="/register">注册</Link>
              </p>
              <form className="fl">
                <input type="text" placeholder="热门搜索：干花花瓶" id='search' />
                <input type="button" onClick={search} />
              </form>
              <div className="btn fl clearfix">
                <Link to="/userinfo"><img src="/img/ia_200000001.png" /></Link>
                <Link to=""><img src="/img/ia_200000002.png" /></Link>
                <Link to="/shoppingCar">
                  <img src="/img/ia_200000003.png" />
                </Link>
              </div>
            </div>
          </div>
          <ul className="clearfix">
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/all">所有商品</Link></li>
            <li><Link to="/about">关于我们</Link></li>
            <li><Link to="/content">联系我们</Link></li>
          </ul>
        </div>
      </div>
      <Routes>
        <Route path='/' element={<Navigate to="/home" />} />
        <Route path="/home" element={<Home />} />
        <Route path="/all" element={<All />} />
        <Route path="/classify/:id" element={<Classify />} />
        <Route path="/shoppingCar" element={<ShoppingCar />} />
        <Route path="/about" element={<About />} />
        <Route path="/userinfo*" element={<Userinfo />} />
        <Route path="/search/:id" element={<Search />} />
        <Route path="/goodsDetails/:id" element={<GoodsDetails />} />
        <Route path="/settlement" element={<Settle />} />
      </Routes>
    </div >
  );
}

export default App;
